<template>
  <view class="container">
    <!-- 建议与反馈 -->
    <view class="advice-text">
      <textarea
        :value="adviceValue"
        placeholder="请输入建议与反馈......"
        placeholder-class="advice-placeholder"
        maxlength="500"
        @input="inputChange"
      ></textarea>
    </view>
    <!-- 图片上传 -->
    <view class="advice-images">
      <view class="images-title">图片</view>
      <view class="note-image-box">
        <view
          class="note-image-item"
          v-for="(item, index) in imageLists"
          :key="index"
        >
          <!-- 右上角删除图标 -->
          <view class="close-icon" @click="del(index)">
            <span class="iconfont icon-guanbi-"></span>
          </view>
          <view class="image-box" @click="previewImg(index)">
            <image :src="item.url" mode="aspectFill"></image>
          </view>
        </view>
        <!-- 因为上传图片设置9张 使用这里做判断 -->
        <view
          v-if="imageLists.length < 9"
          class="note-image-item"
          @click="addImage"
        >
          <!-- 添加图片按钮 -->
          <view class="image-box">
            <span class="addimg-icon iconfont icon-add"></span>
          </view>
        </view>
      </view>
    </view>
    <!-- 联系方式 -->
    <view class="advice-contact">
      <span>联系方式</span>
      <span>点击获取手机号码</span>
    </view>
    <!-- 提交 -->
    <view class="advice-btn" @click="submitAdvice">
      <span>提交</span>
    </view>
  </view>
</template>

<script>
const { submitComplaint } = require("../../api/user/advice");

export default {
  props: {},
  components: {},
  data() {
    return {
      adviceValue: "",
      imageLists: [],
      imagesPath: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    inputChange(e) {
      this.adviceValue = e.detail.value;
    },
    //删除对应图片
    del(index) {
      this.imageLists.splice(index, 1);
    },
    //查看图片
    previewImg(index) {
      let urls = [];
      for (let i = 0; i < this.imageLists.length; i++) {
        urls.push(this.imageLists[i].url);
      }
      uni.previewImage({
        current: index,
        urls: urls,
        indicator: "number",
        loop: true,
        fail(err) {
          uni.showToast({
            title: err,
            icon: "none",
          });
        },
      });
    },
    //添加图片
    addImage() {
      const count = 9 - this.imageLists.length;
      uni.chooseImage({
        count: count,
        success: res => {
          let tempfilepaths = res.tempFilePaths;
          tempfilepaths.forEach((item, index) => {
            // 处理h5多选的情况
            if (index < count) {
              this.imageLists.push({
                url: item,
              });
            }
          });
        },
      });
    },
    // 提交反馈
    submitAdvice() {
      if (uni.getStorageSync("openId") == "")
        return uni.showToast({ title: "未登录不能进行操作！", icon: "none" });

      if (this.adviceValue == "")
        return uni.showToast({ title: "请输入建议或反馈", icon: "none" });
      let cloudPath = uni.getStorageSync("openId") + Date.now() + ".jpg";

      // 上传云储存
      this.imageLists.forEach((item, index, arr) => {
        uniCloud.uploadFile({
          filePath: item.url,
          cloudPath,
          success: res => {
            this.imagesPath.push(res.fileID);
            // 最后一次循环
            if (index == arr.length - 1) {
              let params = {
                text: this.adviceValue,
                path: this.imagesPath.join(","),
                code: uni.getStorageSync("openId"),
              };
              // 提交请求
              submitComplaint(params).then(
                res => {
                  console.log(res);
                  uni.showToast({
                    title: "提交成功！",
                    icon: "success",
                  });
                },
                err => {
                  uni.showToast({ title: err, icon: "none" });
                }
              );
            }
          },
          fail: err => {
            console.log(err);
          },
        });
      });
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.advice-text,
.advice-images,
.advice-contact {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.advice-text {
  margin-top: 20rpx;
  width: 100%;
  height: 340rpx;

  textarea {
    width: 100%;
    height: 100%;
  }

  .advice-placeholder {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #cccccc;
  }
}

.advice-images {
  font-size: 28rpx;
  color: #333333;
  .note-image-box {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    .note-image-item {
      position: relative;
      //这两个百分比很关键
      width: 33.33%;
      height: 0;
      padding-top: 33.33%;
      box-sizing: border-box;
      .close-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0;
        top: 0;
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        color: #cccccc;
        z-index: 2;
      }
      .image-box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 1px #eee solid;
        border-radius: 5px;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
        .addimg-icon {
          font-size: 100rpx;
          color: #cccccc;
        }
      }
    }
  }
}

.advice-contact {
  display: flex;
  justify-content: space-between;

  & span:last-child {
    color: #cccccc;
  }
}

.advice-btn {
  position: absolute;
  left: 0;
  bottom: 20rpx;
  width: 100%;
  padding: 0 30rpx;
  font-size: 28rpx;

  & span {
    display: inline-block;
    width: 100%;
    height: 88rpx;
    background-color: #666ee8;
    line-height: 88rpx;
    text-align: center;
    color: white;
  }
}
</style>
